<template>
  <view class="item_">
    <view class="type">
      <label @click="chengAllChecked()">
        <checkbox v-model="checked" :checked="checked" v-if="preview" />
        <text> {{goods.title}} </text>
      </label>
      <text v-if="preview" class="coupon" @click="clickCoupon">优惠券</text>
    </view>
    <view v-if="skuList.length">
      <view v-for="(item,index) in skuList" :key="index" class="item">
        <delSlide :stuId="item" :deleteStatus="preview" @delItem="deleteGoods">
          <!-- 规则 -->
          <view class="combination"
            v-if="item.promotion && item.goodsSku.goodsType !== 'PORTFOLIO'
          && item.promotion.promotionType !== 'SECKILL'&& item.promotion.promotionType !== 'BARGAIN'">
            <view class="title">{{ item.promotion.title }}</view>
            <view class='rules' v-if="item.promotion.rules && preview"
              @click="more(item.promotion.title, item.promotion.rules)">
              <view class="singleRowEllipsis">{{ item.promotion.rules[0] }}</view>
              <image :src="staticUrl() + '/personalCenter/right.png'" class="more" />
            </view>
          </view>
          <!-- 组合套餐 -->
          <view class="combination menu" v-if="item.goodsSku.goodsType === 'PORTFOLIO'">
            <view class="title">组合套餐</view>
            <view class="other" @click="clickOtherGoods(item)">
              <view>商品明细</view>
              <image :src="staticUrl() + '/personalCenter/right.png'" class="more" />
            </view>
          </view>

          <view class="typesetting">
            <view v-if="preview">
              <checkbox v-model="item.checked" :checked="item.checked" class="checkbox"
                @click="chengChecked(item)" />
            </view>
            <view class="image">
              <view class="promotionType"
                v-if="item.promotion&&item.promotion.promotionType === 'SECKILL'">
                限时秒杀 </view>
              <view class="promotionType"
                v-if="item.promotion&&item.promotion.promotionType === 'BARGAIN'">
                限时特价 </view>
              <ImageCache
                :src="item.goodsSku.original ? item.goodsSku.original : staticUrl() + '/home/defaultImg.png'"
                :mode="'scaleToFill'" @click="chengChecked(item)" />
            </view>

            <view class="goods_info">
              <view class="singleRowEllipsis"
                @click="item.goodsSku.goodsType !== 'PORTFOLIO' ? clickGoodsInfo(item.goodsSku.id) : ''">
                <text class="ephedrine" v-if="item.goodsSku.ephedrine">含麻</text>
                <text class="goodsName">{{ item.goodsSku.goodsName }}</text>
              </view>
              <view class="simpleSpecs singleRowEllipsis">规格：{{ item.goodsSku.simpleSpecs || '' }}
              </view>
              <view class="expirationDate">
                <image :src="staticUrl() + '/new/expiration.png'" alt="" class="_icon" />
                <text>{{ item.goodsSku.expirationDate }}</text>
              </view>
              <view class="manufacturer">
                <image :src="staticUrl() + '/new/company.png'" alt="" class="_icon" />
                <text class="singleRowEllipsis">{{ item.goodsSku.manufacturer }}</text>
              </view>

              <view class="SECKILL"
                v-if="item.promotion&&(item.promotion.promotionType === 'SECKILL' || item.promotion.promotionType === 'BARGAIN')&&count!=='00:00:00'">
                <text v-if="item.promotion&&item.promotion.promotionType === 'SECKILL'">限时秒杀</text>
                <text v-if="item.promotion&&item.promotion.promotionType === 'BARGAIN'">限时特价</text>
                <text>距离结束:{{count}}</text>
              </view>

              <view class="originalPrice" v-if="item.goodsSku.goodsType !== 'PORTFOLIO'">
                <view class="price" v-if="!item.copy">
                  <text class="l" v-if="item.promotionNum">￥{{item.goodsSku.price}}</text>
                  <text class="l" v-if="!item.promotionNum">￥{{item.goodsSku.originalPrice}}</text>
                  <text class="r">/{{ item.goodsSku.goodsUnit }}</text>
                </view>
                <view class="price" v-if="item.copy">
                  <text class="l"> ￥{{ item.goodsSku.price }}</text>
                  <text class="r">/{{ item.goodsSku.goodsUnit }}</text>
                </view>
              </view>

              <view class="originalPrice" v-if="item.goodsSku.goodsType === 'PORTFOLIO'">
                <text class="l">￥{{ item.goodsSku.price }} </text>
                <text class="r"> /{{ item.goodsSku.goodsUnit || '套' }}</text>
              </view>

              <view class="total" v-if="item.goodsSku.goodsType === 'PORTFOLIO'">
                共 <text> {{ item.goodsSku.skuCount }} </text> 件商品
              </view>
              <view class="itemNum" v-if="!preview"> x{{item.num}} </view>
            </view>
          </view>
          <view class="count" v-if="preview">
            <view class="errorMessage">
              <text>{{ item.errorMessage || '' }}</text>
            </view>
            <view class="count-btn">
              <view class="reduce" @click.stop="reduce(item)"></view>
              <view @click='changeNumHandle( item.originalNum,item)' class="inputNum"
                v-if="!item.copy && item.hasOwnProperty('promotionNum') && !item.promotionNum">
                {{ item.originalNum }}
              </view>

              <view @click='changeNumHandle(item.num,item )' class="inputNum"
                v-if="!item.copy && item.promotionNum">
                {{ item.promotionNum }}
              </view>

              <view @click='changeNumHandle( item.num,item )' class="inputNum" v-if="item.copy">
                {{ item.originalNum }}
              </view>

              <view @click='changeNumHandle(item.num,item)' class="inputNum"
                v-if="!item.copy && item.hasOwnProperty('originalNum') && !item.hasOwnProperty('promotionNum')">
                {{ item.num }}
              </view>
              <view class="add" @click.stop="add(item)"></view>
            </view>
          </view>

          <!-- 赠品 -->
          <view class="giveGoods" v-if="item.giftList.length">
            <view v-for="(m, n) in item.giftList" :key="n" class="giveGoods_item">
              <!-- <view class="type">{{ item.promotion.title }}</view> -->
              <view class="type">换购商品</view>
              <view class="titleImage">
                <ImageCache :src="m.original" />
              </view>
              <view class="goodsNamePrice">
                <view class="goodsName singleRowEllipsis">{{ m.goodsName }}</view>
                <view class="price">￥{{ m.price }}</view>
              </view>
              <view class="num"> x{{ m.num }} </view>
            </view>
          </view>
        </delSlide>
      </view>
    </view>
    <view v-if="specifyPromotions.length">
      <view v-for="(item, index) in specifyPromotions" :key="index">
        <view v-for="(k,l) in item.skuList" :key="l" class="item">
          <view class="combination">
            <view class="title"> {{ item.title }} </view>
            <view class="rules" v-if="item.rules" @click="more(item.title, item.rules)">
              <view class="singleRowEllipsis"> {{ item.rules[0] }} </view>
              <image :src="staticUrl() + '/personalCenter/right.png'" alt="" class="more" />
            </view>
          </view>
          <delSlide :stuId="k" :deleteStatus="preview" @delItem="deleteGoods">
            <view class="typesetting">
              <view v-if="preview">
                <checkbox v-model="k.checked" :checked="k.checked" class="checkbox"
                  @click="chengChecked(k)" v-if="preview" />
              </view>
              <view class="image">
                <ImageCache
                  :src="k.goodsSku.original ? k.goodsSku.original : staticUrl() + '/home/defaultImg.png'"
                  mode="scaleToFill" @click="chengChecked(k)" />
              </view>
              <view class="goods_info">
                <view class="singleRowEllipsis"
                  @click="k.goodsSku.goodsType !== 'PORTFOLIO' ? clickGoodsInfo(k.goodsSku.id) : ''">
                  <text class="ephedrine" v-if="k.goodsSku.ephedrine">含麻</text>
                  <text class="goodsName ">{{ k.goodsSku.goodsName }}</text>
                </view>
                <view class="simpleSpecs">规格：{{ k.goodsSku.simpleSpecs }}</view>
                <view class="expirationDate">
                  <image :src="staticUrl() + '/new/expiration.png'" alt="" class="_icon" />
                  <text class="singleRowEllipsis">{{ k.goodsSku.expirationDate }}</text>
                </view>
                <view class="manufacturer">
                  <image :src="staticUrl() + '/new/company.png'" alt="" class="_icon" />
                  <text class="singleRowEllipsis">{{ k.goodsSku.manufacturer }}</text>
                </view>
                <view class="originalPrice" v-if="k.goodsSku.goodsType !== 'PORTFOLIO'">
                  <view class="price" v-if="!k.copy">
                    <text class="l" v-if="k.promotionNum">￥{{k.goodsSku.price}}</text>
                    <text class="l" v-if="!k.promotionNum">￥{{k.goodsSku.originalPrice}}</text>
                    <text class="r">/{{ k.goodsSku.goodsUnit }}</text>
                  </view>
                  <view class="price" v-if="k.copy">
                    <text class="l"> ￥{{ k.goodsSku.price }}</text>
                    <text class="r">/{{ k.goodsSku.goodsUnit }}</text>
                  </view>
                </view>
                <view class="originalPrice" v-if="k.goodsSku.goodsType === 'PORTFOLIO'">
                  <view class="price">
                    <text class="l">￥{{ k.goodsSku.price }} </text>
                    <text class="r"> /{{ k.goodsSku.goodsUnit || '套' }}</text>
                  </view>
                </view>
                <view class="total" v-if="k.goodsSku.goodsType === 'PORTFOLIO'">
                  共 <text> {{ k.goodsSku.skuCount }} </text> 件商品
                </view>
                <view class="itemNum" v-if="!preview"> x{{k.num}} </view>
              </view>
            </view>
            <view class="count" v-if="preview">
              <view class="errorMessage">
                <text>{{ k.errorMessage || '' }}</text>
              </view>
              <view class="count-btn">
                <text class="reduce" @click="reduce(k)"></text>
                <text class="inputNum" @click='changeNumHandle(k.num,k)'>{{ k.num }}</text>
                <text class="add" @click="add(k)"></text>
              </view>
            </view>
          </delSlide>
        </view>
      </view>
    </view>

    <view class="subtotal">
      <view>已选品种共<text>{{selected}}</text>种</view>
      <view>共选中<text>{{selectedNum}}</text>件商品</view>
      <view class="flowPrice">合计<text>￥</text><text>{{goods.priceDetailDTO.flowPrice}}</text>
      </view>
    </view>

  </view>
</template>

<script>
import delSlide from '@/components/carts/delSlide.vue'

export default {
  components: { delSlide },
  props: {
    goods: {
      type: Object,
      default: () => { }
    },
    preview: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      skuList: [],
      specifyPromotions: [],
      checked: false,
      timeId: '',
      count: '00:00:00',
      selected: 0,
      selectedNum: 0,
      copyStatus: false,
    }
  },
  watch: {
    goods: {
      handler (val) {
        this.skuList = JSON.parse(JSON.stringify(val.skuList))
        this.specifyPromotions = JSON.parse(JSON.stringify(val.specifyPromotions))
        this.getList()
        this.computSelectedState()
      },
      deep: true
    }
  },
  mounted () {
    this.skuList = this.goods.skuList
    this.specifyPromotions = this.goods.specifyPromotions
    this.getList()
    this.computSelectedState()
  },
  methods: {
    deleteGoods (item) {
      this.$emit('deleteCartsGoods', item.goodsSku.skuId)
    },
    getList () {
      if (this.preview) {
        const newList = this.skuList.map(item => {
          if (!item.copy && item.originalNum && item.promotionNum) {
            let newItem = JSON.parse(JSON.stringify(item))
            newItem.goodsSku.price = newItem.goodsSku.originalPrice
            newItem.copy = true
            return [item, newItem]
          } else {
            return [item]
          }
        }).flat()
        this.skuList = newList
      }
    },
    computSelectedState () {
      // 选中状态
      let a = this.skuList.every(i => { return i.checked })
      let b = []
      this.specifyPromotions.forEach(i => {
        let c = i.skuList.every(j => { return j.checked })
        b.push(c)
      })
      let d = b.every(i => { return i })
      if (a && d) {
        this.checked = true
      } else {
        this.checked = false
      }
      this.selected = 0
      this.selectedNum = 0
      this.skuList.forEach(i => {
        if (i.checked && !i.copy) {
          this.selected++
          this.selectedNum += i.num
        }
      })
      this.specifyPromotions.forEach(i => {
        i.skuList.forEach(i => {
          if (i.checked && !i.copy) {
            this.selected++
            this.selectedNum += i.num
          }
        })
      })
    },
    clickGoodsInfo (id) {
      uni.navigateTo({ url: '/pages/goodsInfo/index?id=' + id })
    },
    clickOtherGoods (item) {
      this.$emit('otherGoods', item)
    },
    more (type, rules) {
      this.$emit('clickMoreRule', { type, rules })
    },
    chengAllChecked () {
      this.checked = !this.checked
      let a = []
      this.skuList.forEach(i => {
        i.checked = this.checked
        a.push(i.goodsSku.skuId)
      })
      this.specifyPromotions.forEach(i => {
        i.skuList.forEach(j => {
          j.checked = this.checked
          a.push(j.goodsSku.skuId)
        })
      })
      this.$emit('chengChecked', { ids: a + '', checked: this.checked })
    },
    chengChecked (item) {
      item.checked = !item.checked
      this.computSelectedState()
      this.$emit('chengChecked', { ids: item.goodsSku.skuId, checked: item.checked })
    },
    countDown (endTime) {
      if (this.timeId) return
      this.timeId = setInterval(() => {
        let ts = endTime - parseInt(new Date().getTime() / 1000)
        let h = parseInt((ts / 60 / 60) % 24)
        h = h < 10 ? '0' + h : h
        let m = parseInt((ts / 60) % 60)
        m = m < 10 ? '0' + m : m
        let s = parseInt(ts % 60)
        s = s < 10 ? '0' + s : s
        if (s === '0-1') {
          clearInterval(this.timeId)
          this.count = '00:00:00'
        } else {
          this.count = `${h}:${m}:${s}`
        }
      }, 1000)
    },
    clickCoupon () {
      this.$emit('clickCoupon')
    },
    reduce (item) {
      this.$emit('clickReduce', item)
    },
    changeNumHandle (num, item) {
      this.$emit('changeNum', { num, item })
    },
    add (item) {
      this.$emit('clickAdd', item)
    },
  }
}
</script>

<style lang="scss" scoped>
.item_ {
  width: 710rpx;
  border-radius: 24rpx;
  margin: 0 20rpx;
  overflow: hidden;
  padding-bottom: 18rpx;
  margin-bottom: 24rpx;
  ::v-deep .touch_slideLeft {
    padding: 0 20rpx;
  }
  .type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 97rpx;
    font-size: 32rpx;
    color: #333333;
    padding: 0 21rpx 0 16rpx;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    // border-bottom: 1rpx solid rgba(#d9d9d9, 0.3);
    label {
      text {
        font-weight: bold;
      }
    }
    .coupon {
      width: 95rpx;
      line-height: 37rpx;
      text-align: center;
      background: rgba($color: #ef231b, $alpha: 0.1);
      border-radius: 19rpx;
      color: #ef231b;
      font-size: 24rpx;
    }
  }
  .combination {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 20rpx 20rpx 0 16rpx;
    .title {
      padding: 4rpx 10rpx;
      line-height: 32rpx;
      white-space: nowrap;
      font-size: 22rpx;
      color: #ef231b;
      border: 1rpx solid #ef231b;
      border-radius: 8rpx;
      margin-right: 16rpx;
    }
    .rules {
      width: calc(100% - 128rpx);
      color: #666;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      view {
        width: 90%;
      }
      .more {
        width: 10rpx;
        height: 18rpx;
      }
    }
  }
  .menu {
    justify-content: space-between;
    .other {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 24rpx;
      .more {
        width: 10rpx;
        height: 18rpx;
        margin-left: 20rpx;
      }
    }
  }
  .item {
    margin-top: 16rpx;
    padding-bottom: 20rpx;
    // border-bottom: 1rpx solid rgba(#d9d9d9, 0.3);
    background: #fff;
    border-radius: 24rpx;
  }
  .typesetting {
    display: flex;
    .checkbox {
      width: 36rpx;
      height: 36rpx;
      margin: 98rpx 16rpx 0 18rpx;
    }
    .image {
      width: 132rpx;
      height: 132rpx;
      padding: 24rpx;
      margin: 26rpx 16rpx 0;
      background: #f8f8f8;
      position: relative;
      .promotionType {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        padding: 2rpx 10rpx 4rpx;
        white-space: nowrap;
        font-size: 18rpx;
        color: #fff;
        background: #ef231b;
        border-radius: 0 0 14rpx 0;
      }
    }
    .goods_info {
      width: 60%;
      overflow: hidden;
      padding-top: 40rpx;
      position: relative;
      .goodsName,
      .simpleSpecs,
      .expirationDate,
      .manufacturer,
      .price {
        color: #666666;
        font-size: 24rpx;
        line-height: 44rpx;
      }
      .goodsName {
        color: #333333;
        font-size: 30rpx;
        font-weight: bold;
      }
      .expirationDate,
      .manufacturer {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 80%;
        line-height: 38rpx;
        ._icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }
      .SECKILL {
        width: 400rpx;
        height: 34rpx;
        line-height: 34rpx;
        background: linear-gradient(
          90deg,
          rgba(#ef231b, 0.1) 69%,
          rgba(239, 35, 27, 0) 100%
        );
        color: #ef231b;
        font-size: 22rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        padding-left: 12rpx;
        margin: 6rpx 0;
        text:first-child {
          position: relative;
          margin-right: 20rpx;
          font-weight: 500;
        }
        text:first-child::after {
          content: "";
          width: 1rpx;
          height: 14rpx;
          background: #ef231b;
          position: absolute;
          top: 50%;
          right: -10rpx;
          transform: translateY(-50%);
        }
        text:last-child {
          font-weight: 400;
        }
      }
      .originalPrice {
        margin-top: 6rpx;
        .price {
          font-size: 32rpx;
          font-weight: bold;
          .l {
            color: #ef231b;
          }
          .r {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }

      .total {
        font-size: 21rpx;
        color: #121212;
        font-weight: 400;
        margin-top: 6rpx;
        text {
          color: #ef231b;
        }
      }
      .itemNum {
        position: absolute;
        right: 10rpx;
        bottom: 6rpx;
        font-size: 24rpx;
        color: #121212;
      }
    }
  }
  .count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 18rpx;
    .errorMessage {
      font-size: 24rpx;
      color: #ef231b;
      margin-left: 20rpx;
    }
    .count-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 172rpx;
      height: 48rpx;
      border-radius: 24rpx;
      border: 1rpx solid rgba($color: #999, $alpha: 0.5);
      .reduce {
        width: 54rpx;
        height: 48rpx;
        position: relative;
        border-right: 1rpx solid #999;
        opacity: 0.5;
      }
      .reduce::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20rpx;
        height: 2rpx;
        background: #999;
      }
      .inputNum {
        width: 82rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 26rpx;
        color: #333;
        overflow: hidden;
      }
      .add {
        width: 54rpx;
        height: 48rpx;
        position: relative;
        border-left: 1rpx solid #999;
        opacity: 0.5;
      }
      .add::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 24rpx;
        height: 2rpx;
        background: #999;
      }
      .add::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 2rpx;
        height: 24rpx;
        background: #999;
      }
    }
  }
  .giveGoods {
    margin-top: 10rpx;
    .giveGoods_item {
      height: 104rpx;
      margin: 0 18rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .type {
        padding: 4rpx 10rpx;
        line-height: 32rpx;
        white-space: nowrap;
        font-size: 22rpx;
        color: #ef231b;
        border: 1rpx solid #ef231b;
        background: #f5f5f5;
        border-radius: 8rpx;
        margin-left: 18rpx;
        margin-right: 20rpx;
      }
      .titleImage {
        width: 72rpx;
        height: 72rpx;
        margin-right: 24rpx;
      }
      .goodsNamePrice {
        width: 48%;
        margin-right: 16rpx;
        .goodsName {
          font-size: 26rpx;
          color: #333333;
        }
        .price {
          font-size: 22rpx;
          color: #ef231b;
          margin-top: 6rpx;
        }
      }
      .num {
        font-size: 26rpx;
        color: #333333;
      }
    }
  }
  .subtotal {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-right: 18rpx;
    margin-top: 38rpx;
    view {
      color: #333;
      font-size: 20rpx;
      margin-left: 32rpx;
      text {
        font-weight: bold;
        margin: 0 4rpx;
      }
    }
    .flowPrice {
      display: flex;
      align-items: center;
      text {
        color: #ef231b;
        font-size: 28rpx;
        margin: 0;
      }
      text:first-child {
        font-size: 20rpx;
        margin: 4rpx 0 0 4rpx;
      }
    }
  }
}
</style>

